<template>
	<view class="bg">
		<view class="header">
			<view class="header_top">
				<view class="month">
					<view class="month_text">10</view>
					<view class="year">
						<view class="year_text">
							2022
							<view class="triangle"></view>
						</view>
						<view class="month_eng">
							june
						</view>
					</view>
				</view>
				<view class="icon">
		
				</view>
			</view>
			<view class="header_calendar">
				<scroll-view scroll-x scroll-with-animation :show-scrollbar="false">
					<view class="header_calendar_group">
						<view class="header_calendar_group_item" v-for="(item, index) in 30"
							:class="[index === 3 ? 'today' : '', index === 4 ? 'active': '']">
							<view class="cn">{{item}}</view>
							<view class="us">WEB</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="content">
		
			<view class="content_item">
				<view class="content_item_title">
					<view class="content_item_title_icon"></view>
					<view class="content_item_title_name">早餐</view>
				</view>
				<scroll-view scroll-x scroll-with-animation :show-scrollbar="false" class="content_item_list_group">
					<view class="content_item_list">
						<view class="content_item_list_item">
							<image class="content_item_list_item_img" src="/static/home/汉堡.png" mode="center" />
							<view class="content_item_list_item_detail">
								<view class="content_item_list_item_detail_name">鱼香肉丝</view>
								<view class="content_item_list_item_detail_remark">鱼香肉丝鱼香肉丝鱼香肉丝鱼香肉丝鱼香肉丝</view>
							</view>
						</view>
						<view class="content_item_list_item">
							<image class="content_item_list_item_img" src="/static/home/汉堡.png" mode="center" />
							<view class="content_item_list_item_detail">
								<view class="content_item_list_item_detail_name">鱼香肉丝</view>
								<view class="content_item_list_item_detail_remark">鱼香肉丝鱼香肉丝鱼香肉丝鱼香肉丝鱼香肉丝</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="content_item">
				<view class="content_item_title">
					<view class="content_item_title_icon"></view>
					<view class="content_item_title_name">早餐</view>
				</view>
				<scroll-view scroll-x scroll-with-animation :show-scrollbar="false" class="content_item_list_group">
					<view class="content_item_list">
						<view class="content_item_list_item">
							<image class="content_item_list_item_img" src="/static/home/汉堡.png" mode="center" />
							<view class="content_item_list_item_detail">
								<view class="content_item_list_item_detail_name">鱼香肉丝</view>
								<view class="content_item_list_item_detail_remark">鱼香肉丝鱼香肉丝鱼香肉丝鱼香肉丝鱼香肉丝</view>
							</view>
						</view>
						<view class="content_item_list_item">
							<image class="content_item_list_item_img" src="/static/home/汉堡.png" mode="center" />
							<view class="content_item_list_item_detail">
								<view class="content_item_list_item_detail_name">鱼香肉丝</view>
								<view class="content_item_list_item_detail_remark">鱼香肉丝鱼香肉丝鱼香肉丝鱼香肉丝鱼香肉丝</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="content_item">
				<view class="content_item_title">
					<view class="content_item_title_icon"></view>
					<view class="content_item_title_name">早餐</view>
				</view>
				<scroll-view scroll-x scroll-with-animation :show-scrollbar="false" class="content_item_list_group">
					<view class="content_item_list">
						<view class="content_item_list_item">
							<image class="content_item_list_item_img" src="/static/home/汉堡.png" mode="center" />
							<view class="content_item_list_item_detail">
								<view class="content_item_list_item_detail_name">鱼香肉丝</view>
								<view class="content_item_list_item_detail_remark">鱼香肉丝鱼香肉丝鱼香肉丝鱼香肉丝鱼香肉丝</view>
							</view>
						</view>
						<view class="content_item_list_item">
							<image class="content_item_list_item_img" src="/static/home/汉堡.png" mode="center" />
							<view class="content_item_list_item_detail">
								<view class="content_item_list_item_detail_name">鱼香肉丝</view>
								<view class="content_item_list_item_detail_remark">鱼香肉丝鱼香肉丝鱼香肉丝鱼香肉丝鱼香肉丝</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			
			<view class="add" @click="loginFn"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {
			// const token = uni.getStorageSync('token')
			// // 当前未登录状态
			// if(!token) {
			// 	uni.navigateTo({
			// 		url: "/pages/login/login"
			// 	})
			// }
			// console.log(token, "token")
		},
		methods: {
			loginFn(){
				const loginModule = uniCloud.importObject('login');
				uni.preLogin({
					provider:'univerify',
					success() {
						console.log("可以一键登录")
						uni.login({
							provider:'univerify'
						}).then(async res => {
							console.log("打开登录界面", res)
							// 用户是否选择了勾选框
							// uni.getCheckBoxState().then(() => {
								
							// })
							let { data } = await loginModule.login({
								access_token: res.authResult.access_token,
								openid: res.authResult.openid
							})
							console.log(data, "手机号");
						})
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.bg{
		height: 100vh;
		background-color: rgba($zx-system-color, 18%);
	}
	.header {
		padding: 12rpx 40rpx 0 40rpx;
		padding-top: var(--status-bar-height);
		position: fixed;
		top: 0;
		width: 100%;
		height: calc(430rpx - var(--status-bar-height));
		background-color: $zx-system-color;

		&_top {
			@include flex-center;

			.month {
				@include flex-center;

				&_text {
					font-size: 60rpx;
					line-height: 60rpx;
					color: $zx-fontSize-color
				}

				.year {
					margin-left: 12rpx;
					font-size: 20rpx;
					line-height: 20rpx;
					color: $zx-fontSize-color;

					&_text {
						margin-top: 8rpx;

						.triangle {
							display: inline-block;
							width: 6rpx;
							height: 9rpx;
							background-image: url("/static/home/triangle.png");
							background-size: 100% 100%;
							margin-left: 6.5rpx;
						}
					}

				}
			}
		}

		&_calendar {
			margin-top: 30rpx;
			height: 118rpx;
			overflow: hidden;

			&_group {
				display: flex;
				flex-wrap: nowrap;
				width: max-content;
				padding-right: 20rpx;

				&_item {
					width: 41rpx;
					margin-right: 62rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					padding: 24rpx 0;
					box-sizing: border-box;
					font-size: 32rpx;
					line-height: 32rpx;
					color: $zx-fontSize-color;
					opacity: 0.6;
					position: relative;

					&.today {
						&::before {
							content: "";
							position: absolute;
							bottom: 0;
							left: 50%;
							transform: translateX(-50%);
							border-radius: 50%;
							width: 10rpx;
							height: 10rpx;
							background-color: #ffffff;
						}
					}

					&.active {
						opacity: 1;

						&::before {
							content: "";
							position: absolute;
							bottom: 0;
							left: 50%;
							transform: translateX(-50%);
							border-radius: 50%;
							width: 10rpx;
							height: 10rpx;
							background-color: aquamarine;
						}
					}

					.us {
						font-size: 20rpx;
						line-height: 20rpx;
					}
				}
			}
		}
	}

	.content {
		position: fixed;
		left: 40rpx;
		top: calc(var(--status-bar-height) + 220rpx);
		width: 670rpx;
		height: calc(100vh - (var(--status-bar-height) + var(--window-bottom) + 280rpx));
		border-radius: 16rpx;
		background-color: #ffffff;
		padding: 20rpx;
		box-sizing: border-box;

		&_item {
			height: calc(100% / 3 - 50rpx);
			margin-bottom: 40rpx;
			&_title {
				display: flex;
				align-items: center;
				margin-bottom: 12rpx;

				&_icon {
					width: 40rpx;
					height: 40rpx;
					display: inline-block;
					background-image: url("/static/home/Morning.png");
					background-size: 100% 100%;
				}

				&_name {
					display: inline-block;
					font-size: 24rpx;
					line-height: 24rpx;
					margin-left: 14rpx
				}
			}
			
			&_list_group{
				height: calc(100% - 40rpx);
			}	
			
			&_list {
				display: flex;
				align-items: center;
				flex-wrap: nowrap;
				width: max-content;
				height: 100%;
				&_item {
					display: inline-block;
					width: 300rpx;
					height: 100%;
					background-color: rgba($zx-system-color, 20%);
					border-radius: 10rpx;
					margin-right: 30rpx;
					overflow: hidden;
					&:last-child{
						margin-right: 0;
					}
					&_img {
						width: 100%;
						height: calc(100% - 118rpx);
						object-fit: cover;
					}

					&_detail {
						height: 118rpx;
						border-radius: 8rpx;
						background: rgba(255, 255, 255, 0.63);
						padding: 8rpx 12rpx;
						box-sizing: border-box;

						&_name {
							font-size: 28rpx;
							line-height: 28rpx;
							margin-bottom: 8rpx;
							color: #202529;
						}

						&_remark {
							font-size: 18rpx;
							line-height: 26rpx;
							color: #ADADAD;
						}
					}
				}
			}
		}
		
		.add{
			width: 80rpx;
			height: 80rpx;
			position: absolute;
			top: calc(100% - 40rpx);
			left: 50%;
			transform: translateX(-50%);
			background-image: url("/static/home/add.png");
			background-size: 100% 100%;
		}
	}
	
</style>